<template>
  <div class="role_add">
    <el-form :model="roleForm" :rules="roleRules" ref="roleFormRef" label-width="80px" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="fName">
        <el-input v-model="roleForm.fName"></el-input>
      </el-form-item>
      <el-form-item label="排序值" prop="fSort">
        <el-input v-model="roleForm.fSort" type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Role } from '../../api/apiConfig'

export default defineComponent({
  setup(props, { emit }) {
    let roleForm = reactive({
      fName: '',
      fSort: '',
    })
    const roleRules = reactive({
      fName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      fSort: [{ required: true, message: '请输入排序值', trigger: 'blur' }],
    })
    const roleFormRef = ref()
    const quxiao = () => {
      roleFormRef.value.resetFields()
      emit('dialogVisibleVlaue', false)
    }
    const submit = () => {
      roleFormRef.value.validate((valid) => {
        if (valid) {
          let params = {
            fName: roleForm.fName,
            fSort: roleForm.fSort,
          }
          Role.addRole(params).then((res) => {
            if (res.statusCode === 200) {
              roleFormRef.value.resetFields()
              emit('dialogVisibleVlaue', false)
              emit('addOk')
              ElMessage.success({
                message: '添加成功',
                type: 'success',
              })
            }
          })
        } else {
          return false
        }
      })
    }
    return {
      roleForm,
      roleRules,
      roleFormRef,
      quxiao,
      submit,
    }
  },
})
</script>

<style scoped>
</style>
<style lang="scss">
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>